<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>焦点学苑</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">


<!-- 引入JQuery -->
<script type="text/javascript"src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- vue -->
<script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<!-- axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<!-- 引入页头组件 -->
<script src="js/top.js"></script>
<script src="js/category.js"></script>
</head>

<body>
<div id="adetail">
<div class="head-box">
    <div class="head wrap">
          <div class="logo fl"><a href=""><img src="images/logo.png"></a></div>
          <div class="head-right fr">
              <div class="head-a fr">
              		
                   <div class="hgt fl"><img src="images/hgt.png">
                         <div class="hgt-top">
                             <input type="text" class="hgt-text">
                         </div>
                         
                   </div>
                   <!-- <div class="head-a1 fl"><a href=""><img src="images/tb-a.png"></a></div>
                   <div class="head-a1 fl"><a href=""><img src="images/tb-b.png"></a></div>
                   <div class="head-a3 login-click fl">登录</div>
                   <div class="head-a4 reg-click fl">注册</div> -->
              		
              </div>
              <top></top>
              <div class="clearfix"></div>
              <div class="nav fr" >
                  <ul>
                       <li><a href="index.html">首页</a></li>
                       <li class="nav-cut"><a href="">文章</a>
                           <category></category>
                       </li>
                       <li><a href="community.html">社区</a></li>
                       <li><a href="course.html">课程</a></li>
                       <li><a href="active.html">活动</a></li>
                       <li><a href="contact.html">联系我们</a></li>
                  
                  </ul>
              </div>
              <div class="clearfix"></div>
          </div>
    </div>
    
<!--登录注册弹窗-->
<div class="mask"></div>
<div class="login">
    <div class="login-title">
        <div class="login-a">登录</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input v-model="user.uname" type="text" class="login-text" placeholder="注册时填写的用户名"></div>
        <div class="login-d"><input v-model="user.upass" type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input @click.prevent="login"  type="button" class="login-btn" value="登录"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
             <span>还没有焦点账号?><a href="javascript:;" class="reg-href">点击注册</a></span>
        </div>
    </div>
</div>

<div class="reg">
    <div class="login-title">
        <div class="login-a">注册</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input v-model="user.uname" type="text" class="login-text" placeholder="用户名"></div>
        <div class="login-d"><input v-model="user.upass" type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input @click.prevent="regist" type="button" class="login-btn" value="注册"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
        </div>
    </div>
</div>
</div>

<div class="content" >
    <div class="wrap">
            <div class="tsm-height"></div>
            <div class="post" >
                   <div class="post-fl fl" >
                         <div class="post-a1" >{{adts.atitle}}</div>
                         <div class="post-a2" >焦点学苑<span>{{adts.tdate}}</span>
                                               <div class="col-c">
                                                    <span><img src="images/col-c1.jpg">0</span>
                                                    <span><img src="images/col-c2.jpg">3</span>
                                                    <em><img src="images/col-c3.jpg"></em>
                                                    <em><img src="images/col-c4.jpg"></em>
                                                    <em><img src="images/col-c5.jpg"></em>
                                                </div>
                         </div>
                         <div class="post-a4"><img src="aimage/aimg3.jpg"></div>
                         <div class="post-b" v-html="adts.content">
                              
<!--                          <div class="post-a5"><img src="upload/post-a5.jpg"></div> -->
<!--                          <div class="post-b"> -->
<!--                                <p>  树荫下，他满怀忧虑地看着我，“范栩桐你喝水吗？范栩桐要叫救护车吗？范栩桐……”“你啥时变得这么婆婆妈妈了？”我干笑着回应。 -->
<!-- 								他不好意思地挠挠头。“先回我家吧，再给你妈打电话。”我有气无力的点点头。</p> -->
	
<!-- 								<p>  过马路时，他像一根拐杖支撑着我，太阳毒辣的照在头顶，不一会儿，他额头上、手上便沁出了汗水。 -->
<!-- 								行人们都诧异地看着我俩。我俩缓慢的走到他家楼下。他扶我坐好，又跑过马路推来我的自行车，微胖的身子已经大汗淋漓。 -->
<!-- 								之后搀着我来到他家，张扬先贴大创可贴，再拿出纱布，里三层外三层，我的腿活脱脱地成了木乃伊。我感激地说：“你真行，训练有素啊。 -->
<!-- 								今天真是太谢谢你了。”“谁让我们是好兄弟！”他爽朗的笑了。</p> -->
	
<!-- 								<p>  至今，我腿上依然有道痕迹，那是一道伤痕，也是一道见证了友情的伤痕！</p> -->
<!--                          </div> -->
                         
                      </div>

                         <div class="det-b">
                                 <div class="det-title"><img src="images/cou-b1.jpg">在线评论</div>
                                 <div class="det-b1">
                                      <textarea  v-model="rps.rcontent" class="det-area post-area"></textarea>
                                      <div v-if="!role" class="det-b2" id="fabiao"><a @click.prevent="checkLogin" style="cursor:pointer">登录</a>发表</div>
                                 </div>
                                 <div class="det-b3"><input @click="checkLogin2" type="button" class="det-btn" value="评论"></div>
                          </div>
                         <div class="skt">
                 <div class="skt-title">
                       <span class="skt-cut">默认评论</span><em>|</em><span>最新评论</span>
                 </div>
                 <div class="skt-tab">
                          <div class="skt-btm">
                               <ul class="skt-ul" >
                                     <li v-for="r in comments">
                                            <div class="skt-a1"><img :src="r.ujpg">{{r.uname}}<div>{{r.rtime}}</div>
                                                                <div class="menu"><a href=""><img src="images/menu.jpg"></a></div></div>
                                            <div class="skt-a2">{{r.rcontent}}</div>
                                            <div class="skt-a3"><a href=""><img src="upload/det-b.jpg">我要点评</a>
                                                    <div class="menu-a"><img src="images/menu-a1.jpg">0
                                                                        <span><img src="images/menu-a2.jpg">0</span></div>
                                            </div>
                                     </li> 
                                  
                               </ul>
                               <div class="skt-more"><a href="">查看更多</a></div>
                          </div>
                          
                      
                          <div class="skt-btm hide">
                         </div>
                 </div>
           </div>      
                   </div>


                   <!--post-fl-->
                   <div class="post-fr fr">
                           <div class="art-a"><a href=""><img src="upload/gg.jpg"></a></div>
                           <div class="post-t"><a href=""><img src="upload/gg1.jpg"></a></div>
                           <div class="post-y">
                                 <div class="post-y1"><img src="images/cou-b1.jpg">推荐帖子</div>
                                 <ul>
                                      <li v-for="h in recom"><a href="">
                                           <div class="post-y2"><img :src="h.aimg" width=200px></div>
                                           
                                           <div class="post-y3">{{h.atitle}}</div>
                                      	</a>
                                      </li>
           
                                 </ul>
                           </div>
                   </div>
            </div>
    </div>      
</div>
</div>
<!-- 文章详情 ,登录,注册方法 -->
<script type="text/javascript">

	var v1= new Vue({
		el : "#adetail",
		data : {
			adts :[],
			//vue花括号中可以不写 	
			user:{uname:"",upass:""},
			jpg:"",
			rps :{
				uname :"",
				rcontent :"",
				tid :""
			},
			comments : [],
			role :"",
			recom: {
				tid:"",
				aimg:"",
				atitle:""
			}
			//uid:"",
		},
		created(){
			axios.get("article/adetail.s?tid="+location.hash.substring(1)).then(res=>{
				this.adts=res.data[0];
			});
			axios.get("searchcomment.s?tid="+location.hash.substring(1)).then(res=>{
					this.comments=res.data;
				});
			axios.get("getloginUser.s").then(res=>{
    			if(res.data==null){
    				this.role=res.data;
    			}else{
    				this.role=res.data;
    			}
    		});
			axios.get("article/recommendarticle.s").then(res=>{
				this.recom=res.data;
				console.info(this.recom)
			});
			
		},
		methods:{
			checkLogin(){
				var params = new URLSearchParams();
				console.info("dasfsa");
				axios.post("checkLogin.s",params).then(res=>{
					if((res.data.code)==0){
						//$(".mask,.login").show();
						
					        $(".mask").css({
					            display: "block", height: $(document).height()
					        });
							 var $box = $('.login');
					        $box.css({
					           display: "block"
					        });
							$(".close").click(function () {
					        $(".mask,.login").css("display", "none");
					       });

					}else{
						$("#fabiao").hide();
					}
				})
			},
			login(){
				console.info("xx");
				var params = new URLSearchParams();
				params.append("username",this.user.uname);
				params.append("password",this.user.upass);
				
				axios.post("userHead.s",params).then(res=>{
					
					console.log(res.data)
					this.jpg=res.data.ujpg;
				});
				axios.post("user/login.s",params).then(res=>{
					 if(res.data.code){
							//关闭div
							$(".mask,.login").css("display", "none");
							$("#loginA").hide();
						}else{
							$(".mask,.login").css("display", "none");
							alert("登陆成功");
							$("#fabiao").hide();
						} 
				})
			},
			regist(){
				var params = new URLSearchParams();
				params.append("username",this.user.uname);
				params.append("password",this.user.upass);
				axios.post("regist.s",params).then(res=>{
					if(res.data.code){
						alert("注册成功！");
						$(".msk,.reg").css("display","none");
						
					}else{
						alert(res.data.msg);
					}
				})
			},
			
			comment(){
				var params = new URLSearchParams();
				params.append("uname",this.rps.uname);
				params.append("rcontent",this.rps.rcontent);
				params.append("tid",location.hash.substring(1));
				axios.post("reply/reply.s",params).then(res=>{
					if((res.data.code)==1){
						alert("评论成功");
						axios.get("searchcomment.s?tid="+location.hash.substring(1)).then(res=>{
							this.comments=res.data;
						});
					}else{
						alert(res.data.msg);
						console.info(res.data.msg)
					}
				})
			},
			checkLogin2(){
				var params = new URLSearchParams();
				console.info("dasfsa");
				axios.post("checkLogin.s",params).then(res=>{
					if((res.data.code)==0){
						//$(".mask,.login").show();
						
					        $(".mask").css({
					            display: "block", height: $(document).height()
					        });
							 var $box = $('.login');
					        $box.css({
					           display: "block"
					        });
							$(".close").click(function () {
					        $(".mask,.login").css("display", "none");
					       });

					}else{
						this.comment();
					}
				})
			},
			
		}	
	})
</script>       
                              

<div class="footer">
   <div class="wrap">
      <div class="foot">
            <div class="foot-left fl">
                 <a href="">关于我们</a>
                 <a href="">加入我们</a>
                 <a href="contact.html">联系我们</a>
                 <a href="">媒体采访</a>
            </div>
            <div class="foot-c fl"><a href=""><img src="images/foot-logo.jpg"></a></div>
            <div class="foot-right fr">
                 <a href="">同城活动</a>
                 <a href="">课程资讯</a>
                 <a href="">最新发布</a>
                 <a href="index.html">热门文章</a>
            </div>
       </div> 
       <div class="foot-btm">网页制作by云邦</div>    
   </div>
</div>





<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/Action.js"></script>
<script>
    $(".skt-title span").click(function(){
		 $(this).addClass("skt-cut").siblings().removeClass("skt-cut"),
		 $(".skt-tab .skt-btm").hide().eq($(".skt-title span").index(this)).show()
    })
</script>
</body>
</html>

